<template>
  <div class="container mt-5 mb-5">

    <div>
      <div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-color: white">
        <div>产线一</div>
        <draggable class="draggable-list" animation="300" :list="tasks.todos" group="tasks" style="width: 100px">
            <el-card shadow="hover" v-for="(idea, i) in tasks.todos" class="card-1" style="display: inline-block">
              <div style="color: red">
                {{ idea }}
              </div>
            </el-card>
        </draggable>
      </div>
      <div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-color: white">
        <div>产线一</div>
        <draggable class="draggable-list" animation="300" :list="tasks.inprogress" group="tasks" style="width: 100px">
            <el-card shadow="hover" v-for="(idea, i) in tasks.inprogress" class="card-1" style="display: inline-block">
              <div style="color: red">
                {{ idea }}
              </div>
            </el-card>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      tasks: {
        todos: ["更新卡拉云开发文档"],
        inprogress: ["搜索组件开发", "解决容器内拖拽定位问题"],
        review: ["实现富文本编辑", "解决win下滚动条显示问题"],
        completed: [],
      },
    };
  },
};
</script>
<style scoped>
.card-1 {
  width: 100px;
  height: 100px;

}
</style>
